<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>一农</title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link rel="stylesheet" href="assets/mui/css/mui.min.css" />
    <link rel="stylesheet" href="assets/font/iconfont.css" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/manage.css" />
    <script src="assets/mui/js/mui.min.js"></script>
    <script src="assets/zepto/zepto.min.js"></script>
    <script src="assets/artTemplate/template-native.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="js/public.js"></script>
    <script src="js/manage.js"></script>
  </head>
  <body>
    <header class="mui-bar mui-bar-nav my-header">
      <h1 class="mui-title">数据查询</h1>
    </header>
    <nav class="mui-bar mui-bar-tab my-footer">
      <a class="mui-tab-item" href="index.html">
        <span class="mui-icon iconfont icon-fuwuzhongjiewuye my-icon"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item mui-active" href="manage.html">
        <span class="mui-icon iconfont icon-shengchangzhouqi my-icon"></span>
        <span class="mui-tab-label">数据</span>
      </a>
      <a class="mui-tab-item" href="equipment.html">
        <span class="mui-icon iconfont icon-shebei my-icon"></span>
        <span class="mui-tab-label">服务</span>
      </a>
      <a class="mui-tab-item" href="login.html">
        <span class="mui-icon iconfont icon-wode my-icon"></span>
        <span class="mui-tab-label">我的</span>
      </a>
    </nav>
    <div class="my-content">
      <h3>全国作物种植情况</h3>
      <div class="e-outer">
        <div id="main" style="width: 100vw; height: 400px;"></div>
      </div>

      <h3>各省份作物种植情况</h3>
      <div class="e-outer">
        <div class="province">
          <div id="openPopover">河北省</div>
          <div id="openPopover">山西省</div>
          <div id="openPopover">辽宁省</div>
          <div id="openPopover">吉林省</div>
          <div id="openPopover">黑龙江</div>
          <div id="openPopover">江苏省</div>
          <div id="openPopover">浙江省</div>
          <div id="openPopover">安徽省</div>
          <div id="openPopover">福建省</div>
          <div id="openPopover">江西省</div>
          <div id="openPopover">山东省</div>
          <div id="openPopover">河南省</div>
          <div id="openPopover">湖北省</div>
          <div id="openPopover">湖南省</div>
          <div id="openPopover">广东省</div>
          <div id="openPopover">海南省</div>
          <div id="openPopover">四川省</div>
          <div id="openPopover">贵州省</div>
          <div id="openPopover">云南省</div>
          <div id="openPopover">陕西省</div>
          <div id="openPopover">甘肃省</div>
          <div id="openPopover">青海省</div>
          <div id="openPopover">北京市</div>
          <div id="openPopover">天津市</div>
          <div id="openPopover">上海市</div>
          <div id="openPopover">重庆市</div>
          <div id="openPopover">内蒙古</div>
          <div id="openPopover">广西</div>
          <div id="openPopover">宁夏</div>
          <div id="openPopover">新疆</div>
          <div id="openPopover">西藏</div>
        </div>
      </div>

      <div class="blank2"></div>

      <div
        id="middlePopover"
        class="box mui-popover mui-poppicker mui-popover-action mui-popover-bottom"
        style="height: 500px; background-color: #fff;"
      >
        <div class="mui-popover-arrow"></div>
        <div class="popoverheader">
          <div class="text"></div>
          <a href="#middlePopover" class="title-prop"
            ><img src="./images/close.png" alt="" class="closepic"
          /></a>
        </div>

        <div id="popmain" style="width: 100vw; height: 450px;"></div>
      </div>
    </div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      var option = (option = {
        title: {
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [
            '稻谷',
            '小麦',
            '玉米',
            '豆类',
            '薯类',
            '花生',
            '甘蔗',
            '甜菜',
            '烟叶',
            '蔬菜',
            '茶类',
            '果类',
          ],
        },
        series: [
          {
            name: '种植情况',
            type: 'pie',
            radius: '55%',
            center: ['57%', '60%'],
            data: [
              { value: 438616035, name: '稻谷' },
              { value: 354257700, name: '小麦' },
              { value: 447955710, name: '玉米' },
              { value: 181770450, name: '豆类' },
              { value: 126401745, name: '薯类' },
              { value: 63687705, name: '花生' },
              { value: 26145000, name: '甘蔗' },
              { value: 3690000, name: '甜菜' },
              { value: 19890735, name: '烟叶' },
              { value: 268139115, name: '蔬菜' },
              { value: 25791360, name: '茶类' },
              { value: 10734000, name: '果类' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    </script>
  </body>
</html>
